
<html>
<head>
    <meta charset="UTF-8">
    <title>七牛云存储 - JavaScript SDK</title>
    <link href="images/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="__PUBLIC__/boot/css/bootstrap.css">
    <link rel="stylesheet" href="__PUBLIC__/boot/main.css">
    <link rel="stylesheet" href="__PUBLIC__/boot/highlight.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">七牛云存储 - JavaScript SDK</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">上传示例</a></li>
                <li><a href="http://developer.qiniu.com/code/v6/sdk/javascript.html">SDK 文档</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container" style="padding-top: 60px;">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#demo" id="demo-tab" role="tab" data-toggle="tab" aria-controls="demo" aria-expanded="true">示例</a>
        </li>
        <li role="presentation">
            <a href="#code" id="code-tab" role="tab" data-toggle="tab" aria-controls="code">代码</a>
        </li>
        <li role="presentation">
            <a href="#log" id="log-tab" role="tab" data-toggle="tab" aria-controls="log">日志</a>
        </li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="demo" aria-labelledby="demo-tab">
            <div class="row" style="margin-top: 20px;">
                <input type="hidden" id="domain" value="<%= domain %>">
                <input type="hidden" id="uptoken_url" value="<%= uptoken_url %>">
                <ul class="tip col-md-12 text-mute">
                    <li>
                        <small>
                            JavaScript SDK 基于 Plupload 开发，可以通过 Html5 或 Flash 等模式上传文件至七牛云存储。
                        </small>
                    </li>
                    <li>
                        <small>临时上传的空间不定时清空，请勿保存重要文件。</small>
                    </li>
                    <li>
                        <small>Html5模式大于4M文件采用分块上传。</small>
                    </li>
                    <li>
                        <small>上传图片可查看处理效果。</small>
                    </li>
                    <li>
                        <small>本示例限制最大上传文件100M。</small>
                    </li>
                </ul>
                <div class="col-md-12">
                    <div id="container">
                        <a class="btn btn-default btn-lg " id="pickfiles" href="#" >
                            <i class="glyphicon glyphicon-plus"></i>
                            <span>选择文件</span>
                        </a>
                    </div>
                </div>
                <div style="display:none" id="success" class="col-md-12">
                    <div class="alert-success">
                        队列全部文件处理完毕
                    </div>
                </div>
                <div class="col-md-12 ">
                    <table class="table table-striped table-hover text-left"   style="margin-top:40px;display:none">
                        <thead>
                        <tr>
                            <th class="col-md-4">Filename</th>
                            <th class="col-md-2">Size</th>
                            <th class="col-md-6">Detail</th>
                        </tr>
                        </thead>
                        <tbody id="fsUploadProgress">
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <div role="tabpanel" class="tab-pane fade" id="code" aria-labelledby="code-tab">

            <div class="row" style="margin-top: 20px;">
                <div class="col-md-12">
                        <pre><code>
                            //引入Plupload 、qiniu.js后
                            var uploader = Qiniu.uploader({
                            runtimes: 'html5,flash,html4',    //上传模式,依次退化
                            browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
                            uptoken_url: '/token',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
                            // uptoken : '<Your upload token>', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
                            // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
                            // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
                            domain: 'http://qiniu-plupload.qiniudn.com/',   //bucket 域名，下载资源时用到，**必需**
                            get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
                            container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
                            max_file_size: '100mb',           //最大文件体积限制
                            flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
                            max_retries: 3,                   //上传失败最大重试次数
                            dragdrop: true,                   //开启可拖曳上传
                            drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
                            chunk_size: '4mb',                //分块上传时，每片的体积
                            auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
                            init: {
                            'FilesAdded': function(up, files) {
                            plupload.each(files, function(file) {
                            // 文件添加进队列后,处理相关的事情
                            });
                            },
                            'BeforeUpload': function(up, file) {
                            // 每个文件上传前,处理相关的事情
                            },
                            'UploadProgress': function(up, file) {
                            // 每个文件上传时,处理相关的事情
                            },
                            'FileUploaded': function(up, file, info) {
                            // 每个文件上传成功后,处理相关的事情
                            // 其中 info 是文件上传成功后，服务端返回的json，形式如
                            // {
                            //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                            //    "key": "gogopher.jpg"
                            //  }
                            // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                            // var domain = up.getOption('domain');
                            // var res = parseJSON(info);
                            // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
                            },
                            'Error': function(up, err, errTip) {
                            //上传出错时,处理相关的事情
                            },
                            'UploadComplete': function() {
                            //队列文件处理完毕后,处理相关的事情
                            },
                            'Key': function(up, file) {
                            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                            // 该配置必须要在 unique_names: false , save_key: false 时才生效

                            var key = "";
                            // do something with key here
                            return key
                            }
                            }
                            });

                            // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取

                            // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
                        </code></pre>
                </div>
            </div>

        </div>
        <div role="tabpanel" class="tab-pane fade" id="log" aria-labelledby="log-tab">
            <pre id="qiniu-js-sdk-log"></pre>
        </div>
    </div>
</div>

<div class="container" style="display: none;">

    <div class="text-left col-md-12 wrapper">
        <h1 class="text-left col-md-12 ">
            七牛云存储 - JavaScript SDK
            <a class="btn btn-default view_code" id="show_code">
                查看初始化代码
            </a>
            <a class="btn btn-default view_github" href="https://github.com/qiniupd/qiniu-js-sdk" target="_blank">
                <img src="http://qtestbucket.qiniudn.com/GitHub-Mark-32px.png">
                View Source on Github
            </a>
        </h1>
    </div>
    <div class="body">
        <!-- <div class="col-md-12" id="qiniu-js-sdk-log"></div> -->
    </div>
    <div class="modal fade body" id="myModal-code" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">查看初始化代码</h4>
                </div>
                <div class="modal-body">
                <pre><code>
                    //引入Plupload 、qiniu.js后
                    var uploader = Qiniu.uploader({
                    runtimes: 'html5,flash,html4',    //上传模式,依次退化
                    browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
                    uptoken_url: 'http://dici.xin/token.php',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
                    // uptoken : '<Your upload token>', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
                    // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
                    // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
                    domain: 'http://7xt91r.com1.z0.glb.clouddn.com/',   //bucket 域名，下载资源时用到，**必需**
                    get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
                    container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
                    max_file_size: '100mb',           //最大文件体积限制
                    flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
                    max_retries: 3,                   //上传失败最大重试次数
                    dragdrop: true,                   //开启可拖曳上传
                    drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
                    chunk_size: '4mb',                //分块上传时，每片的体积
                    auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
                    init: {
                    'FilesAdded': function(up, files) {
                    plupload.each(files, function(file) {
                    // 文件添加进队列后,处理相关的事情
                    });
                    },
                    'BeforeUpload': function(up, file) {
                    // 每个文件上传前,处理相关的事情
                    },
                    'UploadProgress': function(up, file) {
                    // 每个文件上传时,处理相关的事情
                    },
                    'FileUploaded': function(up, file, info) {
                    // 每个文件上传成功后,处理相关的事情
                    // 其中 info 是文件上传成功后，服务端返回的json，形式如
                    // {
                    //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                    //    "key": "gogopher.jpg"
                    //  }
                    // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                    // var domain = up.getOption('domain');
                    // var res = parseJSON(info);
                    // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
                    },
                    'Error': function(up, err, errTip) {
                    //上传出错时,处理相关的事情
                    },
                    'UploadComplete': function() {
                    //队列文件处理完毕后,处理相关的事情
                    },
                    'Key': function(up, file) {
                    // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                    // 该配置必须要在 unique_names: false , save_key: false 时才生效

                    var key = "";
                    // do something with key here
                    return key
                    }
                    }
                    });

                    // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取

                    // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
                </code></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade body" id="myModal-img" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">图片效果查看</h4>
                </div>
                <div class="modal-body">
                    <div class="modal-body-wrapper text-center">
                        <a href="" target="_blank" >
                            <img src="" alt="" data-key="" data-h="">
                        </a>
                    </div>
                    <div class="modal-body-footer">
                        <div class="watermark">
                            <span>水印控制：</span>
                            <a href="#" data-watermark="NorthWest" class="btn btn-default">
                                左上角
                            </a>
                            <a href="#" data-watermark="SouthWest" class="btn btn-default">
                                左下角
                            </a>
                            <a href="#" data-watermark="NorthEast" class="btn btn-default">
                                右上角
                            </a>
                            <a href="#" data-watermark="SouthEast" class="btn btn-default disabled">
                                右下角
                            </a>
                            <a href="#" data-watermark="false" class="btn btn-default">
                                无水印
                            </a>
                        </div>
                        <div class="imageView2">
                            <span>缩略控制：</span>
                            <a href="#" data-imageview="large" class="btn btn-default disabled">
                                大缩略图
                            </a>
                            <a href="#" data-imageview="middle" class="btn btn-default">
                                中缩略图
                            </a>
                            <a href="#" data-imageview="small" class="btn btn-default">
                                小缩略图
                            </a>
                        </div>
                        <div class="imageMogr2">
                            <span>高级控制：</span>
                            <a href="#" data-imagemogr="left" class="btn btn-default no-disable-click" >
                                逆时针
                            </a>
                            <a href="#" data-imagemogr="right" class="btn btn-default no-disable-click">
                                顺时针
                            </a>
                            <a href="#" data-imagemogr="no-rotate" class="btn btn-default">
                                无旋转
                            </a>
                        </div>
                        <div class="text-warning">
                            备注：小图片水印效果不明显，建议使用大图片预览水印效果
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <span class="pull-left">本示例仅演示了简单的图片处理效果，了解更多请点击</span>

                    <a href="https://github.com/SunLn/qiniu-js-sdk" target="_blank" class="pull-left">本SDK文档</a>
                    <span class="pull-left">或</span>

                    <a href="http://developer.qiniu.com/docs/v6/api/reference/fop/image/" target="_blank" class="pull-left">七牛官方文档</a>

                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>




<script type="text/javascript" src="__PUBLIC__/boot/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/boot/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/plupload/moxie.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/plupload/plupload.dev.js"></script>
<!-- <script type="text/javascript" src="bower_components/plupload/js/plupload.full.min.js"></script> -->
<script type="text/javascript" src="__PUBLIC__/js/plupload/i18n/zh_CN.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/qiniu/ui.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/qiniu/qiniu.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/qiniu/highlight.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
<script>
    /*global Qiniu */
    /*global plupload */
    /*global FileProgress */
    /*global hljs */

    $(function() {
        var uploader = Qiniu.uploader({
            runtimes: 'html5,flash,html4',
            browse_button: 'pickfiles',
            container: 'container',
            drop_element: 'container',
            max_file_size: '1000mb',
            flash_swf_url: 'bower_components/plupload/js/Moxie.swf',
            dragdrop: true,
            chunk_size: '4mb',
//            multi_selection: !(mOxie.Env.OS.toLowerCase()==="ios"),
            uptoken: '{$upToken}',
            domain:'http://7xt91r.com1.z0.glb.clouddn.com/',
            get_new_uptoken: false,
            // downtoken_url: '/downtoken',
            // unique_names: true,
            // save_key: true,
            // x_vars: {
            //     'id': '1234',
            //     'time': function(up, file) {
            //         var time = (new Date()).getTime();
            //         // do something with 'time'
            //         return time;
            //     },
            // },
            auto_start: true,
            log_level: 5,
            init: {
                'FilesAdded': function(up, files) {
                    $('table').show();
                    $('#success').hide();
                    plupload.each(files, function(file) {
                        var progress = new FileProgress(file, 'fsUploadProgress');
                        progress.setStatus("等待...");
                        progress.bindUploadCancel(up);
                    });
                },
                'BeforeUpload': function(up, file) {
                    var progress = new FileProgress(file, 'fsUploadProgress');
                    var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                    if (up.runtime === 'html5' && chunk_size) {
                        progress.setChunkProgess(chunk_size);
                    }
                },
                'UploadProgress': function(up, file) {
                    var progress = new FileProgress(file, 'fsUploadProgress');
                    var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                    progress.setProgress(file.percent + "%", file.speed, chunk_size);
                },
                'UploadComplete': function() {
                    $('#success').show();
                },
                'FileUploaded': function(up, file, info) {
                    var progress = new FileProgress(file, 'fsUploadProgress');
                    progress.setComplete(up, info);
                },
                'Error': function(up, err, errTip) {
                    $('table').show();
                    var progress = new FileProgress(err.file, 'fsUploadProgress');
                    progress.setError();
                    progress.setStatus(errTip);
                }
                // ,
                // 'Key': function(up, file) {
                //     var key = "";
                //     // do something with key
                //     return key
                // }
            }
        });

        uploader.bind('FileUploaded', function() {
            console.log('hello man,a file is uploaded');
        });
        $('#container').on(
                'dragenter',
                function(e) {
                    e.preventDefault();
                    $('#container').addClass('draging');
                    e.stopPropagation();
                }
        ).on('drop', function(e) {
            e.preventDefault();
            $('#container').removeClass('draging');
            e.stopPropagation();
        }).on('dragleave', function(e) {
            e.preventDefault();
            $('#container').removeClass('draging');
            e.stopPropagation();
        }).on('dragover', function(e) {
            e.preventDefault();
            $('#container').addClass('draging');
            e.stopPropagation();
        });



        $('#show_code').on('click', function() {
            $('#myModal-code').modal();
            $('pre code').each(function(i, e) {
                hljs.highlightBlock(e);
            });
        });


        $('body').on('click', 'table button.btn', function() {
            $(this).parents('tr').next().toggle();
        });


        var getRotate = function(url) {
            if (!url) {
                return 0;
            }
            var arr = url.split('/');
            for (var i = 0, len = arr.length; i < len; i++) {
                if (arr[i] === 'rotate') {
                    return parseInt(arr[i + 1], 10);
                }
            }
            return 0;
        };

        $('#myModal-img .modal-body-footer').find('a').on('click', function() {
            var img = $('#myModal-img').find('.modal-body img');
            var key = img.data('key');
            var oldUrl = img.attr('src');
            var originHeight = parseInt(img.data('h'), 10);
            var fopArr = [];
            var rotate = getRotate(oldUrl);
            if (!$(this).hasClass('no-disable-click')) {
                $(this).addClass('disabled').siblings().removeClass('disabled');
                if ($(this).data('imagemogr') !== 'no-rotate') {
                    fopArr.push({
                        'fop': 'imageMogr2',
                        'auto-orient': true,
                        'strip': true,
                        'rotate': rotate,
                        'format': 'png'
                    });
                }
            } else {
                $(this).siblings().removeClass('disabled');
                var imageMogr = $(this).data('imagemogr');
                if (imageMogr === 'left') {
                    rotate = rotate - 90 < 0 ? rotate + 270 : rotate - 90;
                } else if (imageMogr === 'right') {
                    rotate = rotate + 90 > 360 ? rotate - 270 : rotate + 90;
                }
                fopArr.push({
                    'fop': 'imageMogr2',
                    'auto-orient': true,
                    'strip': true,
                    'rotate': rotate,
                    'format': 'png'
                });
            }

            $('#myModal-img .modal-body-footer').find('a.disabled').each(function() {

                var watermark = $(this).data('watermark');
                var imageView = $(this).data('imageview');
                var imageMogr = $(this).data('imagemogr');

                if (watermark) {
                    fopArr.push({
                        fop: 'watermark',
                        mode: 1,
                        image: 'http://www.b1.qiniudn.com/images/logo-2.png',
                        dissolve: 100,
                        gravity: watermark,
                        dx: 100,
                        dy: 100
                    });
                }

                if (imageView) {
                    var height;
                    switch (imageView) {
                        case 'large':
                            height = originHeight;
                            break;
                        case 'middle':
                            height = originHeight * 0.5;
                            break;
                        case 'small':
                            height = originHeight * 0.1;
                            break;
                        default:
                            height = originHeight;
                            break;
                    }
                    fopArr.push({
                        fop: 'imageView2',
                        mode: 3,
                        h: parseInt(height, 10),
                        q: 100,
                        format: 'png'
                    });
                }

                if (imageMogr === 'no-rotate') {
                    fopArr.push({
                        'fop': 'imageMogr2',
                        'auto-orient': true,
                        'strip': true,
                        'rotate': 0,
                        'format': 'png'
                    });
                }
            });

            var newUrl = Qiniu.pipeline(fopArr, key);

            var newImg = new Image();
            img.attr('src', 'images/loading.gif');
            newImg.onload = function() {
                img.attr('src', newUrl);
                img.parent('a').attr('href', newUrl);
            };
            newImg.src = newUrl;
            return false;
        });

    });

</script>
</body>
</html>
